<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Java games basics</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Java, Swing, tutorial, Basics, programming, GUI, multiplatform">
<meta name="description" content="This part of the Java games tutorial covers the basics of game programming
in Java.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Basics</h1>

<p>
In this part of the Java 2D games tutorial, we will write about some 
basics needed to create games. We will create a skeleton of a game. 
Paint a donut and display a picture. 
</p>

<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* LargeSquare */
google_ad_slot = "5070696322";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<h2>About</h2>

<p>
This is Java 2D games tutorial. It is aimed at beginners. This tutorial will 
teach you basics of programming 2D games in Java programming language and 
Swing GUI toolkit. All images used in this tutorial can be downloaded 
<a href="/img/gfx/javagames/images.zip">here</a>.
</p>


<h2>Skeleton</h2>

<p>
We will show the skeleton of each of our Java 2D games. 
</p>

<div class="codehead">Board.java</div>
<pre class="code">
package skeleton;

import javax.swing.JPanel;

public class Board extends JPanel {
    public Board() {
    }
}
</pre>

<p>
The Board is a panel, where the game takes place. 
</p>

<div class="codehead">Skeleton.java</div>
<pre class="code">
package skeleton;

import javax.swing.JFrame;

public class Skeleton extends JFrame {

    public Skeleton() {
        add(new Board());
        setTitle("Skeleton");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(300, 280);
        setLocationRelativeTo(null);
        setVisible(true);
        setResizable(false);
    }
    public static void main(String[] args) {
        new Skeleton();
    }
}
</pre>

<p>
This is the entry point of the game. Here we have the main method. 
</p>


<pre class="explanation">
add(new Board());
</pre>

<p>
Here we put the Board to the center of the <code>JFrame</code> component. 
</p>

<pre class="explanation">
setDefaultCloseOperation(EXIT_ON_CLOSE);
</pre>

<p>
This will close the application when we click on the close button. 
It is not the default behaviour. 
</p>

<pre class="explanation">
setSize(300, 280);
</pre>

<p>
This line sets the size for our window. 
</p>

<pre class="explanation">
setLocationRelativeTo(null);
</pre>

<p>
We center the window. 
</p>

<pre class="explanation">
setVisible(true);
</pre>

<p>
Show the window on the screen. 
</p>

<pre class="explanation">
setResizable(false);
</pre>

<p>
Make the window unresizable.
</p>


<img src="/img/gfx/javagames/skeleton.png" alt="Skeleton">
<div class="figure">Figure: Skeleton</div>


<h2>Donut</h2>

<p>
The objects on the Board are either images or are drawn with the 
painting tools provided by the Java 2D API. 
In the next example, we draw a Donut. We use the painting API. 
</p>

<div class="codehead">Board.java</div>
<pre class="code">
package donut;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.geom.Ellipse2D;

import javax.swing.JPanel;


public class Board extends JPanel{

    public void paint(Graphics g)
    {
      super.paint(g);

      Graphics2D g2 = (Graphics2D) g;

      RenderingHints rh =
            new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                               RenderingHints.VALUE_ANTIALIAS_ON);

      rh.put(RenderingHints.KEY_RENDERING,
             RenderingHints.VALUE_RENDER_QUALITY);

      g2.setRenderingHints(rh);

      Dimension size = getSize();
      double w = size.getWidth();
      double h = size.getHeight();

      Ellipse2D e = new Ellipse2D.Double(0, 0, 80, 130);
      g2.setStroke(new BasicStroke(1));
      g2.setColor(Color.gray);


      for (double deg = 0; deg &lt; 360; deg += 5) {
          AffineTransform at =
              AffineTransform.getTranslateInstance(w / 2, h / 2);
          at.rotate(Math.toRadians(deg));
          g2.draw(at.createTransformedShape(e));
        }
    }
}
</pre>

<p>
The painting is done inside the <code>paint()</code> method. 
</p>


<pre class="explanation">
Graphics2D g2 = (Graphics2D) g;
</pre>

<p>
The <code>Graphics2D</code> object provides a sophisticated 
control over painting. 
</p>

<pre class="explanation">
RenderingHints rh =
    new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                        RenderingHints.VALUE_ANTIALIAS_ON);
rh.put(RenderingHints.KEY_RENDERING,
    RenderingHints.VALUE_RENDER_QUALITY);
g2.setRenderingHints(rh);
</pre>

<p>
The rendering hints are used to make the drawing smooth. 
</p>

<pre class="explanation">
Dimension size = getSize();
double w = size.getWidth();
double h = size.getHeight();
</pre>

<p>
We get the height and the width of the window.
</p>

<pre class="explanation">
Ellipse2D e = new Ellipse2D.Double(0, 0, 80, 130);
g2.setStroke(new BasicStroke(1));
g2.setColor(Color.gray);
</pre>

<p>
Here we create the ellipse.
</p>

<pre class="explanation">
for (double deg = 0; deg &lt; 360; deg += 5) {
    AffineTransform at =
    AffineTransform.getTranslateInstance(w / 2, h / 2);
    at.rotate(Math.toRadians(deg));
    g2.draw(at.createTransformedShape(e));
}
</pre>

<p>
Here the ellispse is rotated 72 times to create a "donut".
</p>

<div class="codehead">Donut.java</div>
<pre class="code">
package donut;

import javax.swing.JFrame;


public class Donut extends JFrame {


    public Donut() {

        add(new Board());

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(360, 310);
        setLocationRelativeTo(null);
        setTitle("Donut");
        setVisible(true);
    }

    public static void main(String[] args) {
        new Donut();
    }
}
</pre>

<p>
This is the main class. 
</p>


<img src="/img/gfx/javagames/donut.png" alt="Donut">
<div class="figure">Figure: Donut</div>


<h2>Image</h2>

<p>
When we create computer games, we often work with images. In the next example we load 
an image and display it on the Board.
</p>

<div class="codehead">Board.java</div>
<pre class="code">
package bardejov;

import java.awt.Graphics;
import java.awt.Graphics2D;

import java.awt.Image;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class Board extends JPanel {

    Image bardejov;

    public Board() {
        ImageIcon ii = new ImageIcon(this.getClass().getResource("bardejov.jpg"));
        bardejov = ii.getImage();
    }

    public void paint(Graphics g) {

        Graphics2D g2d = (Graphics2D) g;
        g2d.drawImage(bardejov, 10, 10, null); 
    }
}
</pre>

<p>
We display an image of a town on the Board. The image is drawn 
inside the <code>paint()</code> method.
</p>

<pre class="explanation">
ImageIcon ii = new ImageIcon(this.getClass().getResource("bardejov.jpg"));
</pre>

<p>
We create an <code>ImageIcon</code>.
</p>


<pre class="explanation">
bardejov = ii.getImage();
</pre>

<p>
We get an <code>Image</code> out of the <code>ImageIcon</code>.
</p>

<pre class="explanation">
g2d.drawImage(bardejov, 10, 10, null); 
</pre>

<p>
We draw the image on the window. 
</p>

<div class="codehead">Image.java</div>
<pre class="code">
package bardejov;

import javax.swing.JFrame;


public class Image extends JFrame {

    public Image() {

        add(new Board());

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(280, 240);
        setLocationRelativeTo(null);
        setTitle("Bardejov");
        setVisible(true);
    }

    public static void main(String[] args) {
        new Image();
    }
}
</pre>

<p>
This is the main class of the example. 
</p>

<img src="/img/gfx/javagames/image.png" alt="Image">
<div class="figure">Figure: Image</div>


<p>
In this chapter, we have covered some basics of Java game programming. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 7, 2008  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
